<template>
    <div class="manager-company" v-loading="loading">
        <div class="search-area">
            <span class="item-box">
                <span class="item-name">监理名称：</span>
                <span class="item-value">
                    <el-input type="text" size="small" v-model="searchName"></el-input>
                </span>
            </span>
            <span class="item-box">
                <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </span>
        </div>
        <div class="content-area">
            <div class="operate-btn">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
            </div>
            <div class="table-list">
                <el-table
                        :data="tableData"
                        border
                        height="100%">
                    <el-table-column
                            label="监理名称"
                            prop="name"
                            show-overflow-tooltip/>
                    <el-table-column
                            label="监理编码"
                            prop="code"
                            width="150"/>
                    <el-table-column
                            label="行业类别"
                            prop="code"
                            show-overflow-tooltip
                            :formatter="industryType"/>
                    <el-table-column
                            label="创建时间"
                            prop="createTime"
                            width="180"/>
                    <el-table-column
                            label="备注"
                            prop="remark"
                            show-overflow-tooltip/>
                    <el-table-column
                            label="操作"
                            align="center"
                            width="220"
                            class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑</el-button>
                            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination v-if="isShowPage"
                               class="no-shadow"
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-sizes="[15, 25, 50, 100]"
                               :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="count">
                </el-pagination>
            </div>
        </div>
        <!--弹出层-->
        <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                v-dialogDrag
                v-if="dialogVisible"
                :close-on-click-modal="false"
                width="600px">
            <div class="dialog-content" v-loading="dialogLoading">
                <div class="line-item">
                    <span class="item-name"><i>*</i>监理名称：</span>
                    <span class="item-value">
                        <el-input v-model="organizationName" placeholder="请输入监理名称"></el-input>
                    </span>
                </div>
                <div class="line-item">
                    <span class="item-name"><i>*</i>监理编码：</span>
                    <span class="item-value">
                        <el-input v-model="organizationCode" placeholder="请输入监理编码"></el-input>
                    </span>
                </div>
                <div class="line-item">
                    <span class="item-name"><i>*</i>部门行业：</span>
                    <span class="item-value depart-industry">
                        <el-tree
                                ref="departIndustryTree"
                                :data="departIndustryData"
                                show-checkbox
                                :default-expanded-keys="secondaryIndustryIds"
                                :default-checked-keys="secondaryIndustryIds"
                                node-key="flag">
                        </el-tree>
                    </span>
                </div>
                <div class="line-item">
                    <span class="item-name">备注：</span>
                    <span class="item-value">
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="remark"></el-input>
                    </span>
                </div>
            </div>
            <div class="dialog-footer">
                <el-button type="primary" size="small" @click="operateEvent" :disabled="dialogLoading">确 定</el-button>
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {getDepartPrimaryData, supervisionList, AddSupervision, EditSupervision, DeleteSupervision} from "@/api/configure/configure";
    export default {
        name: 'Managercompany',
        data () {
            return {
                // 页面加载
                loading: false,
                // 搜索——公司名称绑定参数
                searchName: "",
                // 列表数据
                tableData: [],
                // 是否显示分页
                isShowPage: true,
                // 分页页码
                currentPage: 1,
                // 每页数量
                pageSize: 15,
                // 列表数据总数
                count: 0,

                // 弹出层加载
                dialogLoading: false,
                // 弹出层标题
                dialogTitle: '',
                // 弹出层显示参数
                dialogVisible: false,
                // 弹出层操作类型
                dialogType: 0, // 0——新增；1——编辑
                // 机构ID
                organizationId: '',
                // 机构名称
                organizationName: '',
                // 机构编码
                organizationCode: '',
                // 部门行业数据
                departIndustryData: [],
                // 二级行业ids（用于编辑回显）
                secondaryIndustryIds: [],
                // 备注
                remark: '',
            }
        },
        methods: {
            /**
             * Description:获取列表数据
             * Author:ybt
             * Date:2020/9/17
             */
            getTableData(type){
                this.loading = true;
                let option = {
                    name: this.searchName
                };
                supervisionList(option).then((res) => {
                    this.tableData = res.data;
                    if (type === 0) {
                        this.$message.success('新增成功');
                    } else if (type === 1) {
                        this.$message.success('编辑成功');
                    } else if (type === 2) {
                        this.$message.success('删除成功');
                    } else if (type === 3) {
                        this.$message.success('搜索成功');
                    } else if (type === 4) {
                        this.$message.success('重置成功');
                    }
                    this.loading = false;
                }).catch((error) => {
                    this.loading = false;
                    console.log(error, 'supervisionList');
                });
            },
            /**
             * Description:点击【搜索】按钮触发
             * Author:ybt
             * Date:2020/9/17
             */
            handleQuery(){
                this.getTableData(3);
            },
            /**
             * Description:点击【重置】按钮触发
             * Author:ybt
             * Date:2020/9/17
             */
            resetQuery(){
                this.searchName = '';
                this.getTableData(4);
            },
            /**
             * Description:行业类别格式化
             * Author:ybt
             * Date:2020/9/22
             */
            industryType(row){
                let array = row.supervisionIndustryTypelv2s;
                let str = '';
                array.forEach(item => {
                    if (str === '') {
                        str = item.industryTypelv2Name;
                    } else {
                        str += ',' + item.industryTypelv2Name;
                    }
                });
                return str;
            },
            /**
             * Description:【新增】按钮触发
             * Author:ybt
             * Date:2020/9/17
             */
            handleAdd(){
                this.dialogTitle = '新增监理公司';
                this.dialogType = 0;
                // 机构ID
                this.organizationId = '';
                // 机构名称
                this.organizationName = '';
                // 机构编码
                this.organizationCode = '';
                // 部门行业tree数据
                this.departIndustryData = [];
                // 二级行业ids（用于编辑回显）
                this.secondaryIndustryIds = [];
                // 备注
                this.remark = '';
                this.getDepartPrimaryData();
                this.dialogVisible = true;
            },
            /**
             * Description:【编辑】按钮触发
             * Author:ybt
             * Date:2020/9/17
             */
            handleUpdate(row){
                this.dialogTitle = '编辑三方机构';
                this.dialogType = 1;
                this.organizationId = row.id;
                // 机构名称
                this.organizationName = row.name;
                // 机构编码
                this.organizationCode = row.code;
                // 部门行业tree数据
                this.departIndustryData = [];
                // 二级行业ids（用于编辑回显）
                this.secondaryIndustryIds = [];
                // 备注
                this.remark = row.remark;
                this.getDepartPrimaryData(row);
                this.dialogVisible = true;
            },
            /**
             * Description:获取部门行业数据
             * Author:ybt
             * Date:2020/9/18
             */
            getDepartPrimaryData(row){
                this.dialogLoading = true;
                getDepartPrimaryData({}).then((res) => {
                    this.departIndustryData = JSON.parse(res.data);
                    if (row) {
                        this.departIndustryData.forEach(first => {
                            first.children.forEach(second => {
                                second.children.forEach(item => {
                                    if (row.industryTypelv2Ids.indexOf(item.id) !== -1) {
                                        // 二级行业ids（用于编辑回显）
                                        this.secondaryIndustryIds.push(item.flag);
                                    }
                                })
                            })
                        })
                    }
                    this.dialogLoading = false;
                }).catch((error) => {
                    this.dialogLoading = false;
                    console.log(error, 'getDepartPrimaryData');
                });
            },
            /**
             * Description:【新增】或【编辑】点击确定
             * Author:ybt
             * Date:2020/9/18
             */
            operateEvent(){
                this.dialogLoading = true;
                let selectArray = this.$refs.departIndustryTree.getCheckedNodes();
                if (this.organizationName === '') {
                    this.$message.error('请输入机构名称');
                    this.dialogLoading = false;
                    return
                } else if (this.organizationCode === '') {
                    this.$message.error('请输入机构编码');
                    this.dialogLoading = false;
                    return
                } else if (!selectArray.length || selectArray.length === 0) {
                    this.$message.error('请选择部门行业');
                    this.dialogLoading = false;
                    return
                }
                let industryTypelv2Ids = [];
                selectArray.forEach(item => {
                    if (item.children === undefined) {
                        industryTypelv2Ids.push(item.id)
                    }
                })
                let option = {
                    name: this.organizationName, // 机构名称
                    code: this.organizationCode, // 机构编码
                    industryTypelv2Ids: industryTypelv2Ids, // 二级行业id
                    remark: this.remark, // 备注
                    parentCode: 0, // 机构父级code
                };
                let url = null;
                if (this.dialogType === 0) {
                    url = AddSupervision;
                } else if (this.dialogType === 1) {
                    url = EditSupervision;
                    option.id = this.organizationId; // 机构id
                }
                url(option).then(() => {
                    this.getTableData(this.dialogType);
                    this.dialogVisible = false;
                    this.dialogLoading = false;
                }).catch((error) => {
                    this.dialogLoading = false;
                    console.log(error, 'url');
                });
            },
            /**
             * Description:【删除】按钮触发
             * Author:ybt
             * Date:2020/9/17
             */
            handleDelete(row){
                this.$confirm('确定删除该条监理公司信息吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.loading = true;
                    DeleteSupervision({id: row.id}).then(() => {
                        this.getTableData(2);
                    }).catch((error) => {
                        this.loading = false;
                        console.log(error, 'DeleteSupervision');
                    });
                }).catch(() => {
                    this.$message.info('已取消删除');
                });
            },
            /**
             * Description:切换分页数量
             * Author:ybt
             * Date:2020/9/17
             */
            handleSizeChange(size){
                this.pageSize = size;
                this.currentPage = 1;
                this.getList();
            },
            /**
             * Description:切换分页
             * Author:ybt
             * Date:2020/9/17
             */
            handleCurrentChange(currentPage){
                this.currentPage = currentPage;
                this.getList();
            },
        },
        created(){
            // 获取列表数据
            this.getTableData();
        },
    }
</script>

<style scoped lang="scss">
    .manager-company{
        width: 100%;
        height: 100%;
        padding: 0.125rem 0.1875rem;
        display: flex;
        flex-direction: column;
        .search-area{
            display: flex;
            flex-direction: row;
            background-color: #FFFFFF;
            padding: 0.125rem;
            border-radius: 0.075rem;
            .item-box{
                display: flex;
                flex-direction: row;
                height: 0.4rem;
                line-height: 0.4rem;
                font-size: 0.175rem;
                .item-value{
                    width: 3rem;
                }
            }
            .item-box + .item-box{
                margin-left: 0.1875rem;
            }
        }
        .content-area{
            display: flex;
            flex-direction: column;
            flex: 1;
            background-color: #FFFFFF;
            padding: 0.125rem;
            border-radius: 0.075rem;
            margin-top: 0.1875rem;
            overflow: hidden;
            .table-list{
                display: flex;
                flex: 1;
                margin: 0.125rem 0;
                overflow: hidden;
                .el-table{
                    flex: 1;
                    overflow-y: auto;
                }
            }
        }
        .el-dialog{
            .dialog-content{
                padding: 0 0.625rem 0.125rem 0.375rem;
                .line-item{
                    display: flex;
                    flex-direction: row;
                    margin-bottom: 0.1875rem;
                    .item-name{
                        width: 1.25rem;
                        text-align: right;
                        line-height: 0.425rem;
                        i{
                            color: #f00;
                            padding-right: 0.0375rem;
                        }
                    }
                    .item-value{
                        flex: 1;
                        .el-input,.el-select{
                            width: 100%;
                            height: 0.425rem;
                            line-height: 0.425rem;
                        }
                    }
                    .depart-industry{
                        max-height: 3.75rem;
                        overflow-y: auto;
                    }
                }
            }
            .dialog-footer{
                text-align: center;
            }
        }
    }
</style>
